<template>
	<view class="forget-password-box">
		<view class="forget-password-input-box">
			<!-- 手机号 -->
			<view class="form-item-title">
				手机号码
			</view>
			<view class="form-item">
				<input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
			</view>

			<view class="form-item-title">
				图形验证码
			</view>
			<!-- 图形验证码 -->
			<view class="form-item input-box">
				<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
					placeholder="请输入图形验证码" />
				<view class="form-item--parts">
					<view class="captcha" @click="getCaptcha()">
						<image class="captcha-img" :src="captcha.base64"></image>
					</view>
				</view>
			</view>

			<!-- 短信验证码 -->
			<view class="form-item-title">
				验证码
			</view>
			<view class="form-item">
				<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入验证码" />
				<view class="form-item--parts">
					<view class="captcha-sms" @click="handelSmsCaptcha()">
						<text v-if="!smsState" class="activate">发送验证码</text>
						<text v-else class="un-activate">重新发送({{ times }})秒</text>
					</view>
				</view>
			</view>

			<!-- 账户密码 -->
			<view class="form-item-title">
				账号密码
			</view>
			<view class="form-item">
				<input class="form-item--input" type="password" v-model="password" minlength='6' maxlength="16" placeholder="请输入密码" />
			</view>

			<!-- 确认密码 -->
			<view class="form-item-title">
				确认密码
			</view>
			<view class="form-item">
				<input class="form-item--input" type="password" v-model="confirmPassword" minlength='6' maxlength="16"
					placeholder="请再次输入密码" />
			</view>
		</view>
		<view class="determine-login-button" @click="handleForget">
			<text>确定并登录</text>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	import * as LoginApi from '@/api/login'
	import * as CaptchaApi from '@/api/captcha'
	import * as Verify from '@/utils/verify'
	import MpWeixinMobile from './mp-weixin-mobile'

	// 倒计时时长(秒)
	const times = 60

	// 表单验证场景
	const GET_CAPTCHA = 10
	const SUBMIT_LOGIN = 20
	export default {
		data() {
			return {
				// 正在加载
				isLoading: false,
				// 图形验证码信息
				captcha: {},
				// 短信验证码发送状态
				smsState: false,
				// 倒计时
				times,
				// 手机号
				mobile: '',
				// 密码
				password: '',
				// 短信验证码
				smsCode: '',
				// 图形验证码
				captchaCode: '',
				// 邀请码
				invitationCode: '',
				// 确认密码
				confirmPassword: ''
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {
			// 获取图形验证码
			this.getCaptcha()
		},

		methods: {
			// 获取图形验证码
			getCaptcha() {
				const app = this
				CaptchaApi.image()
					.then(result => app.captcha = result.data)
			},

			// 点击发送短信验证码
			handelSmsCaptcha() {
				const app = this
				if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
					app.sendSmsCaptcha()
				}
			},

			// 表单验证
			formValidation(scene = GET_CAPTCHA) {
				const app = this
				// 验证获取短信验证码
				if (scene === GET_CAPTCHA) {
					if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
						return false
					}
				}
				// 验证提交登录
				if (scene === SUBMIT_LOGIN) {
					if (!app.validteMobile(app.mobile) || !app.validtePssword(app.password) || !app.validteconfirmPassword(
							app.confirmPassword)) {
						return false
					}
				}
				return true
			},

			// 验证手机号
			validteMobile(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入手机号')
					return false
				}
				if (!Verify.isMobile(str)) {
					this.$toast('请输入正确格式的手机号')
					return false
				}
				return true
			},

			// 验证图形验证码
			validteCaptchaCode(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入图形验证码')
					return false
				}
				return true
			},

			// 验证密码
			validtePssword(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入密码')
					return false
				}
				return true
			},

			// 验证重复密码
			validteconfirmPassword(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入邀请码')
					return false
				} else if (this.password !== this.confirmPassword) {
					this.$toast('两次密码输入不一致，请重新输入');
					return false
				}
				return true
			},

			// 请求发送短信验证码接口
			sendSmsCaptcha() {
				const app = this
				app.isLoading = true
				CaptchaApi.sendSmsCaptcha({
						form: {
							mobile: app.mobile,
							captchaKey: app.captcha.key,
							captchaCode: app.captchaCode,
						}
					})
					.then(result => {
						// 显示发送成功
						app.$toast(result.message)
						// 执行定时器
						app.timer()
					})
					.catch(() => app.getCaptcha())
					.finally(() => app.isLoading = false)
			},

			// 执行定时器
			timer() {
				const app = this
				app.smsState = true
				const inter = setInterval(() => {
					app.times = app.times - 1
					if (app.times <= 0) {
						app.smsState = false
						app.times = times
						clearInterval(inter)
					}
				}, 1000)
			},

			// 点击确认修改
			handleForget() {
				const app = this
				if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
					app.submitForget()
				}
			},

			// 确认修改密码
			submitForget() {
				const app = this
				app.isLoading = true
				store.dispatch('Forget', {
						password: app.password,
						mobile: app.mobile,
						smsCode: app.smsCode,
						isParty: false,
						partyData: {}
					})
					.then(result => {
						// 显示登录成功
						app.$toast(result.message)
						// 相应全局事件订阅: 刷新上级页面数据
						uni.$emit('syncRefresh', true)
						// 跳转回原页面
						setTimeout(() => app.onNavigateBack(1), 2000)
					})
					.catch(err => {
						// 跳转回原页面
						if (err.result.data.isBack) {
							setTimeout(() => app.onNavigateBack(1), 2000)
						}
					})
					.finally(() => app.isLoading = false)
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/index/index')
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	.forget-password-box {
		height: 100%;
		padding: 80rpx 30rpx 0 30rpx;
		background-color: #fff;

		.forget-password-input-box {
			.form-item-title {
				font-size: 15px;
				color: black;
			}

			// 输入框元素
			.form-item {
				display: flex;
				border-bottom: 1rpx solid #f3f1f2;
				margin-bottom: 30rpx;
				height: 96rpx;

				&--input {
					font-size: 16rpx;
					letter-spacing: 1rpx;
					flex: 1;
					height: 100%;
					color: #c0c0c0;
				}

				&--parts {
					min-width: 100rpx;
					height: 100%;
				}

				// 图形验证码
				.captcha {
					height: 100%;

					.captcha-img {
						display: block;
						width: 192rpx;
						height: 100%;
					}
				}

				// 短信验证码
				.captcha-sms {
					font-size: 28rpx;
					line-height: 50rpx;
					padding-right: 20rpx;

					.activate {
						color: #cea26a;
					}

					.un-activate {
						color: #9e9e9e;
					}
				}
			}
		}

		.determine-login-button {
			width: 100%;
			height: 86rpx;
			margin-top: 100rpx;
			background: linear-gradient(to right, #ecb53c, #ff9211);
			color: #fff;
			border-radius: 80rpx;
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
			letter-spacing: 5rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
